<template>
  <div class="order-detail">
    <div class="order-head">
      <div class="title">发起人信息</div>
    </div>
    <div class="info-item">姓名：{{ userInfo.staffName }}</div>
    <div class="info-item">岗位：{{ userInfo.postFamily }}</div>
    <div class="info-item">所属部门：{{ userInfo.orgName }}</div>
    <div class="info-item">联系方式：{{ userInfo.mobile }}</div>
    <div class="order-head mg">
      <div class="title">工单信息</div>
    </div>
    <div class="info-item">工单ID：{{ info.orderId }}</div>
    <div class="info-item">工单标题：{{ info.orderName }}</div>
    <div class="info-item">期望时间：{{ info.planFinishTime }}</div>
    <div class="info-item">工单类型：{{ info.orderType }}</div>
    <div class="info-item">业务类型：{{ info.serviceKind }}</div>
    <div class="info-item">二级业务类型：{{ info.serviceNextKind }}</div>
    <div class="info-item">中台类型：{{ info.marketType }}</div>
    <div class="info-item">工单内容：{{ info.orderContent }}</div>
    <div class="info-item">
      附件：
      <div style="font-size: 13px;">
        <div v-for="item in fileList" :key="item.url">
          <a :href="item.url">{{ item.file.name }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { orderDetail, orderUploadDetail } from '@/api/order.js'
import { setFileRequestImgUrl } from '@/utils/wyy'

export default {
  data() {
    return {
      userInfo: {},
      info: {},
      fileList: []
    }
  },
  mounted() {
    this.getDetail()
    this.getUploadDetail()
  },
  methods: {
    async getDetail() {
      const res = await orderDetail({ orderId: this.$route.query.orderId })
      const { success, result } = res
      if(success) {
        this.userInfo = result.user
        this.info = result.order
      }
    },
    async getUploadDetail() {
      const res = await orderUploadDetail({ orderId: this.$route.query.orderId })
      const { success, result } = res
      if(success) {
        result.map(item => {
          this.fileList.push({ url: setFileRequestImgUrl(item.urlInfo), file: { name: item.fileName }})
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.order-detail {
  background: #ffffff;
  box-shadow: 0 2px 4px 1px #f3f7fa;
  border-radius: 6px;
  padding: 12px 8px;
  margin: 6px 8px;
  .mg {
    margin-top: 8px;
  }
  .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /deep/ .van-tabs__content {
      overflow-y: auto;
    }
  }
  .order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-weight: 500;
    .title {
      display: flex;
      align-items: center;
      &::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 14px;
        background: #4D98FF;
        border-radius: 6px;
        margin-right: 8px;
      }
    }
  }
  .info-item {
    font-size: 14px;
    color: #666;
    letter-spacing: -0.14px;
    padding: 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
  }
}
</style>
